import React,{useEffect,useState} from "react";
import { Text, View,StyleSheet,TouchableHighlight,TouchableOpacity, Linking,ScrollView, Alert,TextInput,Platform ,Image,BackHandler,Dimensions} from "react-native";
import * as S from "../Home/styles";
import { Avatar, HStack, Center, NativeBaseProvider ,ChevronRightIcon,useToast,ArrowBackIcon} from "native-base";
import {launchImageLibrary,launchCamera} from 'react-native-image-picker';
import { /*RFValue*/ } from "react-native-responsive-fontsize";
import Icon from 'react-native-vector-icons/Ionicons';
import { useGlobal } from '../../utils/GlobalContext';
import { getUeser,phoneLogin,getCode,register } from "../../services/user";
import { CommonActions } from '@react-navigation/native';
import { ImageMap } from "../../constants/categories";

const generateRandomString = (length) => {
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let result = '';

  for (let i = 0; i < length; i++) {
    const randomIndex = Math.floor(Math.random() * characters.length);
    result += characters.charAt(randomIndex);
  }

  return result;
};


const Title = ({navigation,route}:any)=>{

  
  return(
    <View style={styles.titleBox}>
      <TouchableOpacity
        style={styles.backBtn}
        onPress={() => {
          // route.params.findIconUrl('work',22)
          // route.params.setInputName(route.params.name + '')
          // route.params.setInputName(route.params.name)
          
          route.params.setState(generateRandomString(10))
          route.params.setInputName(route.params.name)

          navigation.goBack()
        }}
      >
        <ArrowBackIcon size="5" />
        {/* <Text>{route.params.iconName}</Text> */}
      </TouchableOpacity>
      <Text style={styles.titlText}>选择图标</Text>
    </View>
  )
}

const IconScreen = ({route,navigation}:any)=>{


  useEffect(() => {
    // route.params.setModalVisible(false)
    const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
      // 处理返回操作，可以在这里执行你的逻辑
      // 如果返回 true，表示消费了该事件，不会继续传递给其他组件
      // 如果返回 false，表示未消费该事件，会继续传递给其他组件或默认行为
      // 你可以根据需求来判断是否消费该事件
      route.params.setState(generateRandomString(10))
      route.params.setInputName(route.params.name)
      navigation.goBack()
      return true; // 返回 true，表示已处理该事件
    });

  }, []);
  

  return (
    <View style={styles.pageList}>
      {
        ImageMap.map((item,index)=>{
          if(!item.isEmoj){
            return(
              <View style={[styles.itemBox]} key={index}>
                <TouchableOpacity
                  onPress={() => {
                    route.params.findIconUrl(item.name,item.url)
                    route.params.setInputName(route.params.name)
                    navigation.goBack()
                  }}
                >
                  <View style={styles.pageItem}>
                    <Image style={{ width:28,height:28}} source={item.url} alt="" />
                  </View>
                </TouchableOpacity>
              </View>
            )
          }
        })
      }
      
    </View>
  )
}


const IconPage = ({route,navigation}:any) => {


 

  return (
    <S.GrayContainer style={{backgroundColor:'#FFFFFF'}}>
      <NativeBaseProvider>
       <View style={styles.container}>
          <Title navigation={navigation} route={route} />
          <ScrollView style={{height:'100%'}} showsVerticalScrollIndicator={false}>
          <IconScreen route={route} navigation={navigation}/>
          </ScrollView>
       </View>
      </NativeBaseProvider>
      
    </S.GrayContainer>
  );
};


export default IconPage;
const styles = StyleSheet.create({
  container:{
    height:"100%",
    width:'100%',
    // alignItems:'center',
    paddingHorizontal:24,
    
  },
  titleBox:{
    width:'100%',
    position:'relative',
    alignItems:'center',
    height:40,
    justifyContent:"center",
    marginBottom:26,
  },
  backBtn:{
    position:'absolute',
    left:0,
    backgroundColor:'#fff',
    width:40,
    height:40,
    display:'flex',
    alignItems:'center',
    justifyContent:'center',
    borderRadius:100,
    
    shadowColor: Platform.OS === 'android' ? '' : 'rgba(0, 0, 0, 0.08)', // 阴影颜色
    shadowOffset: { width: 0, height: 2 }, // 阴影偏移
    shadowOpacity: 1, // 阴影不透明度
    shadowRadius: 8, // 阴影半径
    elevation: 3, // 阴影深度
  },
  titlText:{
    fontSize:17,
    fontWeight:'600',
    color:'#000000'
  },
  pageList:{
    flexDirection:'row',
    flexWrap:'wrap',
    width:'100%',
    justifyContent:"center",
    // backgroundColor:'red'
  },
  itemBox:{
    width:'25%',
    // backgroundColor:'red'
    padding:8,
  },
  pageItem:{
    // width:72,
    // height:72,
    aspectRatio: 1,
    backgroundColor:'#F5F5F5',
    // marginBottom:16,
    alignItems:'center',
    justifyContent:'center',
    borderRadius:16,
  },
  

})
